<!doctype html>
<html>
<head>
    <title></title>
    <meta name="viewport"content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
	<meta charset="utf-8">
</head>
<body>   
    <button id="js_createshareinfo">****生成二维码****</button>

    <style>
        *{margin:0;padding:0;}
    .share-content{}
    .share-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0, .8); display: none;}
    .share-scinfo{background:#ffffff;padding:15px;position:fixed;bottom:0;left:10px;bottom:10px;right:10px;display: none;}
    .shareimgview{width:80%;margin:0 auto;}
    .shareimg{width:100%;}
    </style>
    <div class="share-content">
        <div class="share-mask"></div>
        <div class="share-scinfo">
            <span class="shareclose">×</span>
            <div class="shareimgview">
                <img class="shareimg" id="js_shareimg" src="" alt="">
                <p class="imgscmsg">海报生成中...请稍后</p>
            </div>
        </div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script>
    function drawAndShareImage(data, callback) {
        var canvas = document.createElement("canvas");
        canvas.width = data.bgWidth;
        canvas.height = data.bgHeight;
        var context = canvas.getContext("2d");

        var myImage = new Image();
        myImage.src = data.bgimg;
        
       
           

        myImage.onload = function () {
            context.drawImage(myImage, 0, 0, data.bgWidth, data.bgHeight);            			        
		 
            var myImage2 = new Image();
            myImage2.src = data.qrcode;

            myImage2.onload = function () {
                context.drawImage(myImage2, data.qrcodePosition.x, data.qrcodePosition.y, data.qrcodeWidth, data.qrcodeHeight);

				if(data.textinfo)
				{
					context.font = "14px '微软雅黑'";
					context.fillText(data.textinfo.text, data.textinfo.x, data.textinfo.y);
				}
			 
                try {
                    var base64 = canvas.toDataURL("image/png");  
                    callback({ isSuccess: true, data : base64 });
				} catch(error) {
					console.error(error)
					var msg =  "本地测试中，chrome浏览器存在跨域问题，请放在服务器测试！或者使用其他浏览器测试。";
					callback({ isSuccess: false, data : msg});
				}
            }
        }
    }

    $(function(){
        $(".shareclose").click(function(){
            $(".share-mask").hide();            
            $(".share-scinfo").slideUp();
        });
        $("#js_createshareinfo").click(function(){
            $(".share-mask").show();
            $(".share-scinfo").slideDown();
            var data = {
                bgimg: './1.png',
                qrcode: './2.png',
                bgWidth: 720,
                bgHeight: 1280,
                qrcodeWidth: 176,
                qrcodeHeight: 176,
                qrcodePosition: {
                    x : 533,
                    y : 1025
                },
                textinfo: {
                    text: "大家好 - 驴友",
                    x: 583,
                    y: 1210
                }
            }
            drawAndShareImage(data, function(result){
                if(result){
                    if(result.isSuccess){
                        $("#js_shareimg").attr("src", result.data);
                        $(".imgscmsg").hide();
                    }else{
                        $(".imgscmsg").text("生成失败");
                    }
                }else{
                    alert("生成失败，查看错误日志");
                }
            });
        });
    });
</script>
</html>